<!DOCTYPE html>
<html>
	<head>
		<LINK rel="stylesheet" type="text/css" href="film.css">
		<title>Films</title>
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<table>
			<tr>
				<th>R&eacute;alisateurs</th>
				<th>Films</th>
			</tr>
			<tr>
				<td>
					<ul>
						<li><a id="steven" href="#">Steven Spielberg</a></li>
						<li><a id="clint" href="#">Clint Eastwood</a></li>
						<li><a id="luc" href="#">Luc Besson</a></li>
					</ul>
				</td>
				<td>
					<div id="films"></div>
				</td>
			</tr>
		</table>
		<script type="text/javascript">
		$(document).ready(function() {
		
			$('#steven').click(function() {
				auteur('steven_spielberg.xml');
			});// click
			$('#clint').click(function() {
				auteur('clint_eastwood.xml');
			});// click
			$('#luc').click(function() {
				auteur('luc_besson.xml');
			});// click
			
			function auteur(doc){
				var uri = "http://localhost:8080/test-rest/films/"+doc;
				$.ajax({
					  type: "get", 
					  dataType: "xml",
					  url: uri, 
					  success: function(data, textStatus, jqXHR) {
						  draw(data);
					  },
					  error: function(jqXHR, textStatus, errorThrown) {
						  // Une erreur s'est produite lors de la requete
					 }
				});
				
		
			}
			
			function draw(data){
				$("#films").html('');
				$(data).find('Film').each( function(){ 
					 
					 var titre = $(this).find('Titre').text();
					 var genre = $(this).find('Genre').text();
					 var date = $(this).find('Date').text();
					 var desc = $(this).find('Description').text();
					 
					 var root = $("<div id='film'></div>");
					 var e1 = $("<div id='titre'>Titre : "+titre+"</div>");
					 var e2 = $("<div id='genre'>Genre : "+genre+"</div>");
					 var e3 = $("<div id='date'>Date : "+date+"</div>");
					 var e4 = $("<div id='desc'>Synopsis : "+desc+"</div>");
					 
					 root.append(e1);
					 root.append(e2);
					 root.append(e3);
					 root.append(e4);
					 $("#films").append(root);
				  });	
			}
		});
		
		
		</script>
	</body>
</html>